<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="value in list" :key="value.id">
        <img :src="value.src" class="swiper-img">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      list: [
        {
          id: '1',
          src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1794943833,4266781623&fm=26&gp=0.jpg'
        },
        {
          id: '2',
          src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2084232859,2443746101&fm=26&gp=0.jpg'
        },
        {
          id: '3',
          src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604938405960&di=b5bb86e4d18fa1d7aec6579d77ac4c53&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ffade75feeed44cb8a821b6d6b94ce5a4755fdedff8f31-MSvhCN_fw658'
        }
      ],
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
  background #ffffff

.wrapper
  overflow hidden
  width 100%
  height 0
  padding-bottom 34%

  .swiper-img
    width 100%
</style>
